<template>
  <div class="find">
    <hmNanBar title="发现" :showLeft="false"></hmNanBar>
    <van-pull-refresh v-model="loading" @refresh="refreshEvent">
      <div>
        <div class="content">
          <findCell title="面试技巧"></findCell>
          <technicItem
            v-for="(item, index) in technicList"
            :key="index"
            :info="item"
          ></technicItem>
          <div class="line"></div>
          <findCell title="市场数据"></findCell>
          <van-tag class="tag" color="#eceaea" text-color="#545671">{{
            chart.city
          }}</van-tag>
          <van-tag class="tag" color="#eceaea" text-color="#545671">{{
            chart.position
          }}</van-tag>
          <ul class="chart">
            <li
              class="chart-item"
              v-for="(item, index) in chart.yearSalary"
              :key="index"
              v-show="index < showToal"
            >
              <div class="c1">{{ item.year.substr(0, 5) }}</div>
              <div class="c2">
                <div
                  class="num"
                  :style="{
                    width: (item.salary / chart.topSalary) * 100 + '%'
                  }"
                >
                  ￥{{ item.salary }}
                </div>
              </div>
              <div class="c3">
                <div v-if="item.percent != undefined">
                  <i class="iconfont down" v-if="item.percent >= 0">&#xe651;</i>
                  <i class="iconfont up" v-else>&#xe64e;</i>
                </div>
              </div>
              <div class="c4" v-if="item.percent != undefined">
                <span>{{ item.percent }}%</span>
              </div>
            </li>
          </ul>
          <div class="look-more">
            <span v-if="showToal === 3" @click="showToal = 100"
              >展开更多 <i class="iconfont">&#xe652;</i></span
            >
            <span v-else class="m2" @click="showToal = 3"
              >收起 <i class="iconfont">&#xe652;</i></span
            >
          </div>
          <div class="line"></div>
          <div class="contents">
            <findCell
              title="面经分享"
              @click.native="$router.push('/home/shareList')"
            ></findCell>
            <shareItem
              v-for="(item, index) in shaerList"
              :key="index"
              :info="item"
            ></shareItem>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import findCell from './findCell'
import technicItem from './technicItem'
import shareItem from './shareItem'
import { articlesTechnic, chartDatHhot, articlesShare } from '@/api/find.js'
export default {
  name: 'find',
  components: {
    findCell,
    technicItem,
    shareItem
  },
  data () {
    return {
      technicList: [],
      chart: '',
      showToal: 3,
      shaerList: [],
      loading: false
    }
  },
  // 调用刷新获取接口方法
  async created () {
    this.refreshEvent()
  },
  methods: {
    async refreshEvent () {
      Promise.all([
        await articlesTechnic(),
        await chartDatHhot(),
        await articlesShare({ limit: 3 })
      ]).then(response => {
        const res = response[0]
        this.technicList = res.data.data.list
        const res1 = response[1]
        res1.data.data.yearSalary.reverse()
        this.chart = res1.data.data
        const res2 = response[2]
        this.shaerList = res2.data.data.list
        window.console.log(res2)
        this.loading = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.find {
  .content {
    padding: 20px @p15;
    .line {
      margin-left: -30px;
      margin-right: -30px;
      height: 10px;
      background-color: #f7f4f5;
      align-items: center;
    }
    .tag {
      padding: 5px @p15;
      margin-right: 15px;
      margin-top: 5px;
    }
    .chart {
      .chart-item {
        display: flex;
        align-items: center;
        padding-top: 15px;
        .c1 {
          width: 60px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #545671;
          line-height: 20px;
          letter-spacing: 0px;
        }
        .c2 {
          width: 218px;
          height: 12px;
          background: #ebdfdf;
          border-radius: 4px;
          .num {
            width: 218px;
            height: 12px;
            background: #fe6d67;
            border-radius: 4px;
            color: white;
            text-align: right;
            font-size: 12px;
          }
        }
        .c3 {
          width: 40px;
          text-align: center;
          .down {
            color: #00d47a;
          }
          .up {
            color: #fe6d67;
          }
        }
        .c4 {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: right;
          color: #5b5d75;
          line-height: 20px;
          letter-spacing: 0px;
        }
      }
    }
    .look-more {
      text-align: center;
      margin-top: 15px;
      color: #000;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #545671;
      line-height: 20px;
      letter-spacing: 0px;
      i {
        color: #ccc;
      }
      .m2 {
        i {
          display: inline-block;
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>
